{include file="public/user_header" /}

<!-- 详情模态框 -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" style="top:5%;" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">详情</h4>
      </div>
      <form id="detailForm" method="post">
        <div class="modal-body" style="height: 100%;text-align: center;">
          <div class="form-group" style="text-align: center; height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">产品名称</label>
            <div class="col-sm-9">
              <input id="detail_gName" class="form-control" readonly="readonly">
            </div>
          </div>
          <div class="form-group" style=" height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">产品单价</label>
            <div class="col-sm-4">
              <input id="detail_gPrice" name="gName" class="form-control" readonly="readonly">
            </div>
          </div>
          <div class="form-group" style=" height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">产品数量</label>
            <div class="col-sm-9">
              <input id="detail_gNum" name="gIntroduce" class="form-control" readonly="readonly">
            </div>
          </div>
          <div class="form-group" style=" height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">证书编号</label>
            <div class="col-sm-9">
              <input id="detail_gAUTCode" name="gAUTCode" class="form-control" readonly="readonly">
            </div>
          </div>
          <div class="form-group" style=" height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">生产公司</label>
            <div class="col-sm-9">
              <input id="detail_cName" name="gClass" class="form-control" readonly="readonly">
            </div>
          </div>
          <div class="form-group" style=" height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">产地</label>
            <div class="col-sm-9">
              <input id="detail_gPlace" name="gClass" class="form-control" readonly="readonly">
            </div>
          </div>
          <div class="form-group" style=" height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">产品质量</label>
            <div class="col-sm-9">
              <input id="detail_gQuality" name="gENV" class="form-control" readonly="readonly">
            </div>
          </div>
          <div class="form-group" style=" height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">产品等级</label>
            <div class="col-sm-9">
              <input id="detail_gGrade" name="gSellCode" class="form-control" readonly="readonly">
            </div>
          </div>
          <div class="form-group" style=" height: 36px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-3 control-label">产品介绍</label>
            <div class="col-sm-9">
              <textarea id="detail_gIntroduce" name="gSellCode" class="form-control" readonly="readonly"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- /详情模态框 -->

<div class="container" style=" height: 100%; width: 100%; padding: 10px 20%; margin-top: 30px; margin-bottom: 30px;">
  <form class="search-form" action="{:url('searchByCode')}" method="post">
    <div class="input-group" style="width: 100%;">
      <input type="text" id="gSellCode" name="gSellCode" class="form-control" value="{$currentText}" autocomplete="off">

      <div class="input-group-btn">
        <button type="submit" class="btn btn-warning btn-flat"><i class="fa fa-search"></i>
        </button>
      </div>
    </div>
    <!-- /.input-group -->
  </form>
</div>

<div class="container">
  <!-- Main content -->
  <section class="content">
    <div class="row">
      <div>
        <div class="box">
          <div class="box-header">
            <h3 class="box-title">符合该产品销售码的产品如下</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example2" class="table table-bordered table-hover">
              <thead>
              <tr>
                <th>产品名称</th>
                <th style="width: 110px; ">产品图</th>
                <th>产品质量</th>
                <th>产品等级</th>
                <th>产品单价</th>
                <th>产品数量</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              {volist name="result" id="item"}
              <tr>
                <td>{$item.gName}</td>
                <td style="padding-left: 20px;"><img style='width: 110px;height: 80px;' src='__STATIC__/../uploads/goodsImg/{$item.gImg}' alt='暂无图片'></td>
                <td>{$item.gQuality}</td>
                <td>{$item.gGrade}</td>
                <td>{$item.gPrice}</td>
                <td>{$item.gNum}</td>
                <td><button type='button' onclick='getDetail("{$item.pID}")' class='btn btn-primary btn-xs' style='margin-left: 10%'><i class='fa fa-book'></i> 详情</button>
                  {if condition="$Think.session.uID"}
                  <button type='button' onclick='addCart("{$item.pID}","{$Think.session.uID}")' class='btn btn-warning btn-xs' style='margin-left: 10%'><i class='glyphicon glyphicon-shopping-cart'></i> 加入购物车</button>
                  {else /}
                  <button type='button' onclick='noLogin()' class='btn btn-warning btn-xs' style='margin-left: 10%'><i class='glyphicon glyphicon-shopping-cart'></i> 加入购物车</button>
                  {/if}
                </td>
              </tr>
              {/volist}
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </section>
  <!-- /.content -->

</div>

</div>


<!-- 引入js依赖 -->
{include file="public/introduce" /}

<script>
  $(function() {
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });

  function getDetail(val){
    //通过当前行在表中的index 获取当前行信息
    var row = $.ajax({
      url: "../user/getDetail",
      data: {'pID':val},
      async: false,
      type: "post"
    }).responseJSON
    // console.log(row)
    //填充行中对应数据到模态框中
    $("#detail_gName").val(row.gName);
    $("#detail_gPrice").val(row.gPrice);
    $("#detail_gNum").val(row.gNum);
    $("#detail_gAUTCode").val(row.gAUTCode);
    $("#detail_cName").val(row.cName);
    $("#detail_gQuality").val(row.gQuality);
    $("#detail_gGrade").val(row.gGrade);
    $("#detail_gPlace").val(row.gPlace);
    $("#detail_gIntroduce").val(row.gIntroduce);
    //唤起modal
    $("#detailModal").modal();
  };

  function addCart(val,uID){
    $.ajax({
      url: "../user/addCart",
      type: "post",
      async: false,
      data: {"pID":val, "uID": uID, "num":1 },
      success: function (result){
        if (result.success){
          alert("已成功加入购物车");
        }
      }
    });
  };

  function noLogin(){
    alert("您尚未登录，请先登录！");
  }

</script>

</body>

</html>